<template>
  <div>
    <div class="div_detail">
      <span @click="editdetail"> < </span>
      <span>分类商品</span>
      <span></span>
    </div>
    <div class="dd">
      <ul class="ul_ed_box">
        <li v-for="item in lists" :key="item.id" @click="editliat_router(item)">
          <img :src="item.pic" />
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      lists: {},
    };
  },
  mounted() {
    var id = this.$route.query.id;
    console.log(id);
    this.$APL.SHOPLIST(id).then((res) => {
      console.log(res.data.data);
      this.lists = res.data.data;
      this.lists = this.lists.filter((item) => {
        if (item.categoryId == id) {
          return item;
        }
      });
    });
  },
  methods: {
    editdetail() {
      window.history.back();
    },
    editliat_router(item) {
      this.$router.push({ path: "/orderlist", query: { id: item.id } });
    },
  },
};
</script>
<style lang="scss">
.dd {
  height: 90vh;
}
.div_detail {
  width: 100%;
  height: 1rem;
  background: goldenrod;
  display: flex;
  align-items: center;
  justify-content: space-around;
  //   position: relative;
  span {
    &:nth-child(1) {
      font-size: 0.5rem;
    }
  }
}
.ul_ed_box {
  width: 100%;
  img {
    width: 200px;
  }
  p {
    margin-left: 1rem;
  }
}
</style>